<template>
    <div>
        <button @click="show = !show">显示/隐藏</button>
        <!--增加 appear 属性会出现动画效果-->
        <transition name="hello" :appear="true">
            <h1 v-show="show">你好呀</h1>
        </transition>
        <!--<h1 v-show="show" class="go">你好呀</h1>-->
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                show: true
            }
        }
    }
</script>

<style scoped>
    h1 {
        background-color: orange;
    }

    /*如果添加了name属性，那么class名就会变成name-enter-active，name-leave-active ，
    默认是v-enter-active,v-leave-active */
    .hello-enter-active {
        animation: ruizi 1s;
    }

    .hello-leave-active {
        animation: ruizi 1s reverse;
    }

    /*.come {
        animation: ruizi 1s;
    }

    .go {
        animation: ruizi 1s reverse;
    }*/

    @keyframes ruizi {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0px);
        }
    }
</style>